<template>
  <div >
    <!-- <div class="intro" @click="drawer =true">
      <i class="el-icon-bell icon"></i>
      <span v-if="countMsg!=0" class="new-msg">{{countMsg}}</span>
    </div> -->
    

    <el-drawer
      :visible.sync="drawer"
      :modal="false"
      ustom-class="demo-drawer"
      :before-close="onClose"
      direction="rtl">
         <div>
          <div class="content-box" v-for="(item,index) in tableData" :key="index">
            <div class="content-line">
              <div :class="item.viewNum?'mark isread':'mark' ">{{item.viewNum? '已读': '未读'}}</div>
              <div class="content">{{item.content}}
                <span class="link" v-if="item.type ===0" @click="approve(item.id,1, index, item.connectId)">去查看</span>
                <span class="link" v-if="item.type ==1 && item.viewNum==0" @click="approve(item.id,2, index, item.connectId)">阅读</span>
              </div>
              <i class="el-icon-delete" @click="()=>remove(item.id)"></i>
              <!-- <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="()=>remove(item.id)"></el-button> -->
            </div>
            <el-divider content-position="right">{{item.sendTime}}</el-divider>
          </div>
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
         </div>
          
    </el-drawer>
  </div>
</template>

<script>
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import request from "@/tools/request";
import { objectFilter } from "@/tools/array";
export default {
  inject:['reload'],  //注入依赖
  components: {
    TablePager
  },
  props: {
    useBack: {
      type: Boolean,
      default: true
    },
   
  },
  data(){
    return {
      drawer: this.useBack,
      countMsg: 0,
      tableData: [],
       pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
    }
  },
  mounted(){
    // var bar_dv = this.$refs.desc;
    // bar_dv.html(intro.content)
  //  this.countMsgNum()
  },
  created(){
    console.log('drawer1',this.drawer)
    this.queryData()
  },
  methods: {
    async queryData() {
      let search = objectFilter({currPage:this.pager.current})
      const res = await request({
        url: "/sys/message/list",
        method: "POST",
        data: search
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    onClose(){
      this.drawer = false
      this.$emit('closeDrawer',false);
    },
    pageChange(val) {
      this.pager.current = val;
      this.queryData();
    },
    async approve(id, type, index, connectId){
      let url = `/sys/message/view?id=${id}`
      let res = await request({
        url: url,
        method: "GET",
      })
      let info = this.tableData[index]
        info.viewNum = 1
        this.tableData[index] =  info
        this.$store.commit('changeNewMsg', -1)
      if(type ==1){
        // this.drawer = false
        // this.$emit('closeDrawer',false);
        this.$router.replace({
          path: "/approve/detail",
          query:{id:connectId}
          }, () => {})
      }
      
    },
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let del = await request({
        url: "/sys/message/delete",
        method: "POST",
        dataType:'json',
        data: [id]
      });
       if(del.code !==0 )return
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.queryData()
        this.countMsgNum()
      })
    },
  }
};
</script>
<style  lang='scss' scoped>
.icon{
  font-size: 20px;
}
  .intro{
    position: relative;
  }
	.new-msg{
		position: absolute;
    color: white;
    background: red;
    border-radius: 30px;
    top: -4px;
    width: 20px;
    font-size: 13px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 11px
	}
  .content-box {
    width: 95%;
    margin:auto;
    margin-bottom: 10px;
  }
  .content {
    width: 100%;
    text-indent: 10px;
    text-align: start;
    font-size: 15px;
    color: #161616;
    padding-left: 16px;
  }
  .link {
    color: rgb(10, 130, 228);
  }
  .content-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mark{
    width: 30px;
    font-size: 12px;
    color: #27e294;
  }
  .isread{
    // background: rgb(165, 167, 166);
    color: rgb(165, 167, 166);
  }
</style>
